<template>
  <div :id="chartId" style="width:100%;height:100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'EchartAnnular',
    props: {
        chartId: { type: String, default: function() { return 'myCharts' } }, // 图表id，当一个页面多图表时需要传此参数
        title: { type: Object, default: function() { return { name: '', align: 'center', size: '15' } } }, // 展示title
        alldata: { type: Array, default: function() { return [{ name: '', value: '' }] } }, // 数据项
        formatter: { type: String, default: function() { return '{b}: {c}次' } }, // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        radius: { type: Array, default: function() { return ['55%', '70%'] } }, // 内圆半径 外圆半径 内圆半径为0时变成饼状图
        isLabel: { type: Boolean, default: function() { return false } }, // 是否展示标签提示信息
        isLabelLine: { type: Boolean, default: function() { return false } }, // 是否展示标签线
        labelAlign: { type: String, default: function() { return 'outside' } }, // outside 外侧 'inside''inner' 'inside' 'center' 内侧
        labelFormatter: { type: Function, default: function() { return null } }, // 格式化标签展示内容
        color: { type: Array, default: function() { return [] } }, // 颜色
        graphicText: { type: String, default: function() { return '' } }, // 显示的文本块字符
        graphicType: { type: String, default: function() { return 'text' } }, // 显示的文本类型
        graphicLeft: { type: String, default: function() { return 'middle' } }, // 对齐方式 可以是数字 百分比 center居中
        graphicTop: { type: String, default: function() { return 'middle' } }, // 对齐方式 可以是数字 百分比 middle居中
        graphicColor: { type: String, default: function() { return '#000' } }, // 文本快颜色
        graphicFontSize: { type: Number, default: function() { return 20 } }, // 文本块字体大小
        isLegend: { type: Boolean, default: function() { return false } }, // 是否显示图例
        legendLeft: { type: String, default: function() { return 'left' } }, // 图例位置 left center right
        legendTop: { type: String, default: function() { return 'top' } }, // 图例位置 top middle bottom
        legendOrient: { type: String, default: function() { return 'horizontal' } }, // 'horizontal' 'vertical'
        legendIcon: { type: String, default: function() { return 'rect' } }, // 'circle'圆点, 'rect'矩形, 'roundRect'圆角矩形, 'triangle'三角形, 'diamond'菱形, 'pin'针型, 'arrow'箭头, 'none' 支持图片链接例如'image://http://xxx.xxx.xxx/a/b.png'
        legendFormatter: { type: Function, default: function() { return null } }, // 格式化标签展示字体
        legendTextStyle: { type: Object, default: function() { return {} } }, // 标签展示的字体样式
        circleCenter: { type: Array, default: function() { return ['50%', '50%'] } }, // 圆心在容器的位置第一项为横坐标 第二项纵坐标  可直接这只数字为绝对坐标
        textColor: { type: String, default: function() { return '#000' } }, // 字体颜色
        chubu: { type: String, default: function() { return '' } }, // 初步
        xuqiu: { type: String, default: function() { return '' } }, // 需求
        yingdan: { type: String, default: function() { return '' } }, // 方案
        fangan: { type: String, default: function() { return '' } }, // 谈判
        legend2: { type: Array, default: function() { return {} } }, // 数据方块
        funnelList: { type: Array, default: function() { return [] } }

    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        funnelList(val) {
            this.creatEcharts()
        },
        xuqiu(val) {
            this.creatEcharts()
        },
        yingdan(val) {
            this.creatEcharts()
        },
        fangan(val) {
            this.creatEcharts()
        },
        xData(val) {
            this.creatEcharts()
        }
    },
    created() {
        window.addEventListener('resize', this.onresize)
        this.$bus.on('toggleClick', () => {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.onresize()
                })
            }, 300)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize)
        this.$bus.off('toggleClick', this.onresize)
    },
    mounted() {
        this.creatEcharts()
        setTimeout(() => {
            this.onresize()
        }, 300)
    },
    methods: {
        creatEcharts() {
            const myChart = echarts.init(document.getElementById(this.chartId))
            const option = {
                color: this.color,
                legend: {
                    orient: 'vertical',
                    data: this.legend2,
                    left: 'left',
                    top: 'left'
                },
                series: [
                    {
                        name: '销售漏斗',
                        type: 'funnel',
                        width: '40%',
                        height: '90%',
                        left: '25%',
                        top: 'center',
                        data: this.funnelList
                    }
                ]
            }
            myChart.setOption(option, true)
            this.myChart = myChart
        },
        onresize() {
            if (this.myChart !== null) {
                this.myChart.resize()
            }
        }
    }
}

</script>

<style scoped lang="scss">

</style>
